<template>
  <div class="right-context-menu-wrap">
    <ul class="right-menu-list">
      <li class="right-menu-item item tc" @click="handleYczd" v-show="showAnalysisMenu">异常诊断</li>
      <li class="right-menu-item item tc" @click="handleXsyqqx" v-show="showAnalysisMenu">小时用气曲线</li>
      <li class="right-menu-item item tc" @click="handleSlgj" v-show="hideSlgj">索量估计</li>
      <li class="right-menu-item item tc" @click="handleSlgjCancel" v-show="showSlgj">去除索量估计</li>
      <li class="right-menu-item item tc" v-show="showXxlhMenu" @click="handleYqtjClick">用气量统计</li>
      <!-- <li class="right-menu-item item tc" v-show="showXxlhMenu">残差估计</li> -->
    </ul>
    <!-- 异常诊断 -->
    <Modal
      class="modal-p10"
      v-model="yczdVisibile"
      :title="selectedCandlSerie + ' 异常诊断'"
      width="400"
      :styles="{ height: '50%' }"
    >
      <use-gas-law :content="abnormalList" />
    </Modal>

    <!-- 小时用气曲线 -->
    <Modal
      v-model="xxygqxVisible"
      :title="selectedCandlSerie + ' 小时用气曲线'"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="handleXsyqqxCancel"
    >
      <div :is="xxyqquTpl" :chartData="xxyqqxData" />
      <div slot="footer">
        <Button type="primary" @click="handleXsyqqxCancel">确定</Button>
      </div>
    </Modal>
    <!-- 用气量统计 -->
    <Modal
      v-model="yqtjVisible"
      title="用气量统计"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="yqtjModalCancel"
    >
      <div :is="yqtjTpl" :chartData="yqtjChartData" :defaultOptions="hBar3dOptions" />
      <div slot="footer">
        <Button type="primary" @click="yqtjModalCancel">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import { each, merge } from 'lodash'
import { slgjMixins, yqltjMixins, yczdMixins, xsyqqxMixins } from '../mixins'
import UseGasLaw from '../UseGasLaw'
import { hBar3dOptions } from './chartOptions'

const { mapState, mapActions } = createNamespacedHelpers('historyVerify')

export default {
  name: 'history-verify-right-context-menu',
  mixins: [slgjMixins, yqltjMixins, yczdMixins, xsyqqxMixins],
  props: {
    showContentmenu: {
      type: String
    }
  },
  components: {
    UseGasLaw,
    ELine: () => import('@/commons/charts/ELine'),
    HBar3d: () => import('@/commons/charts/HBar3d')
  },
  computed: {
    ...mapState([
      'selectedCandlSerie',
      'abnormalList',
      'slgjList',
      'yqtjList',
      'xxlhList',
      'slgjState',
      'xxlhListIndexs'
    ]),
    hBar3dOptions() {
      return hBar3dOptions
    },
    showAnalysisMenu() {
      return this.showContentmenu === 'candlestick'
    },
    showXxlhMenu() {
      return this.showContentmenu === 'xxlh'
    },
    showSlgj() {
      return this.showContentmenu === 'xxlh' && this.slgjState
    },
    hideSlgj() {
      return this.showContentmenu === 'xxlh' && !this.slgjState
    },
    yqtjChartData() {
      const { listMap = [] } = this.yqtjList
      const _serList = []
      each(listMap, item => {
        const { minValue, maxValue, count } = item
        _serList.push({
          name: minValue + '-' + maxValue,
          y: count,
          min: minValue,
          max: maxValue
        })
      })
      return merge({}, hBar3dOptions, {
        series: [
          {
            data: _serList
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions(['loadAbnormalData', 'changeSlgjState', 'changeSlgjList', 'loadYqltjData'])
  }
}
</script>
<style lang="less">
.right-context-menu-wrap {
  width: 100%;
  height: 100%;
  .right-menu-item {
    padding: 4px;
    cursor: pointer;
  }
}
</style>
